<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .content {
            width: 600px;
            border: 1px solid #f66;
            border-radius: 5px;
            margin: 50px auto;
            padding: 10px;
        }

        header input {
            padding-left: 20px;
            width: 560px;
            height: 30px;
            margin-left: 8px;
            /* 去掉输入框获取焦点时蓝色边框 */
            outline: none;
        }

        header input:focus {
            border-color: rgba(255, 0, 0, 0.5);
            box-shadow: 0 0 5px red;
        }

        .todo {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid gray;
            font-weight: 900;
        }

        .todo button,
        footer button {
            float: right;
            margin-top: 13px;
        }

        footer {
            height: 40px;
            line-height: 40px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id='app'>

        <div class="content">
            <!-- 监听自定义事件 -->
            <todo-header @add="addTodo"></todo-header>

            <todo-item v-for="item in todoList" :key="item.id" :item="item" @del="delTodo"></todo-item>

            <footer>
                <input v-model="isAll" type="checkbox">
                <span>
                    <span>已完成 {{isCount}} 件</span>
                    /
                    <span>总计 {{ todoList.length }} 件</span>
                </span>
                <button @click="delList">清除已完成</button>
            </footer>
        </div>

    </div>
</body>


<template id="header">
    <header>
        <input type="text" v-model="title" placeholder="请输入待办事项" @keyup.enter="add">
    </header>
</template>

<template id="todo">
    <div class="todo" v-bind:style="{backgroundColor: bgColor}" @mouseenter="delShow(true)"
        @mouseleave="delShow(false)">
        <input v-model="item.isFlag" type="checkbox">
        {{ item.title }}
        <button v-show="isShowDel" @click="delClick(item.id)">删除</button>
    </div>
</template>

<script>

    // -------------- 头部 ----------------
    const header = {
        template: '#header',
        data() {
            return {
                title: ''
            }
        },
        methods: {
            add() {
                // 触发自定义事件
                this.$emit('add', this.title)
                this.title = ''
            }
        }
    }

    // ------------- 内容组件 -------------
    const todo = {
        template: '#todo',
        props: {
            item: Object
        },
        data() {
            return {
                isShowDel: false,
                bgColor: '#fff'
            }
        },
        methods: {
            delShow(val) {
                // console.log(val);
                this.isShowDel = val
                this.bgColor = val ? '#ccc' : '#fff'
            },
            delClick(id) {
                // console.log(id);
                this.$emit('del', id)
            }
        }
    }


    const app = {
        data() {
            return {
                todoList: [
                    {
                        id: '123iosduia', isFlag: false, title: '学习 Vue 知识点'
                    },
                    {
                        id: 'asdasdasd', isFlag: true, title: '吃一份美美的早餐'
                    },
                    {
                        id: 'jkhjhohio', isFlag: false, title: '吃一份香喷喷的午餐'
                    }
                ]
            }
        },
        methods: {
            // 定义一个父组件接收子组件传递参数的方法
            addTodo(value) {
                // console.log(value, 1111);
                this.todoList.unshift({
                    id: Math.random(),
                    isFlag: false,
                    title: value
                })
            },
            delTodo(id) {
                // console.log(222222, id);
                this.todoList = this.todoList.filter(item => item.id != id)
            },
            delList() {
                // 删除已完成的内容
                for (let i = this.todoList.length - 1; i >= 0; i--) {
                    if (this.todoList[i].isFlag) {
                        // 要删除
                        this.todoList.splice(i, 1)
                    }
                }
            }
        },
        components: {
            'todo-header': header,
            'todo-item': todo
        },
        computed: {
            // 计算当前被选中的数量
            isCount() {
                return this.todoList.reduce((todal, item) => {
                    return todal + (item.isFlag ? 1 : 0)
                }, 0)
            },
            isAll: {
                get() {
                    return this.isCount == this.todoList.length
                },
                set(val) {
                    // console.log(val);
                    this.todoList.forEach(item => {
                        item.isFlag = val
                    });
                }
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>